import React from "react";
import {
  Col,
  Row,
  Button,
  Form,
  FormGroup,
  Label,
  Input,
  FormFeedback,
} from "reactstrap";
import { IPersonState } from "./State";

interface IProps {
  DefaultState: IPersonState;
}

export default class PersonalDetails extends React.Component<
  IProps,
  IPersonState
> {
  private defaultState: Readonly<IPersonState>;

  constructor(props: IProps) {
    super(props);
    this.defaultState = props.DefaultState;
    this.state = props.DefaultState;
  }

  public render() {
    return (
      <Row>
        <Col
          lg="8"
          // 界面左边详细页面内容
        >
          <Row>
            <Col>
              <h4 className="mb-3">联系人详情</h4>
            </Col>
          </Row>
          <Row>
            <Col>
              <Form>
                <Row>
                  <Col md={6}>
                    <FormGroup>
                      <Label for="firstName">姓</Label>
                      <Input
                        name="firstName"
                        id="firstName"
                        placeholder="请输入姓"
                        value={this.state.FirstName}
                        onChange={this.updateBinding}
                      />
                      <FormFeedback>此项不能为空</FormFeedback>
                    </FormGroup>
                  </Col>
                  <Col md={6}>
                    <FormGroup>
                      <Label for="lastName">名</Label>
                      <Input
                        name="lastName"
                        id="lastName"
                        placeholder="请输入名"
                        value={this.state.LastName}
                        onChange={this.updateBinding}
                      />
                      <FormFeedback>此项不能为空</FormFeedback>
                    </FormGroup>
                  </Col>
                </Row>
                <Row>
                  <Col md={6}>
                    <FormGroup>
                      <Label for="phoneNumber">手机号</Label>
                      <Input
                        name="phoneNumber"
                        id="phoneNumber"
                        placeholder="请输入手机号"
                        value={this.state.PhoneNumber}
                        onChange={this.updateBinding}
                      />
                      <FormFeedback>此项不能为空xxx</FormFeedback>
                    </FormGroup>
                  </Col>
                  <Col md={6}>
                    <FormGroup>
                      <Label for="email">邮箱地址</Label>
                      <Input
                        type="email"
                        name="email"
                        id="email"
                        placeholder="请输入邮箱"
                        value={this.state.Email!}
                        onChange={this.updateBinding}
                      />
                      <FormFeedback>邮箱地址不正确</FormFeedback>
                    </FormGroup>
                  </Col>
                </Row>
                <FormGroup>
                  <Label for="addr">地址</Label>
                  <Input
                    name="addr"
                    id="addr"
                    placeholder="请输入地址"
                    value={this.state.Address!}
                    onChange={this.updateBinding}
                  />
                </FormGroup>
                <FormGroup>
                  <Label for="dateOfBirth">生日</Label>
                  <Input
                    type="date"
                    name="dateOfBirth"
                    id="dateOfBirth"
                    placeholder="请输入生日"
                    value={this.state.DateOfBirth!}
                    onChange={this.updateBinding}
                  />
                </FormGroup>
                <FormGroup>
                  <Button color="primary" className="mr-2">
                    保存
                  </Button>
                  <Button>重置</Button>
                </FormGroup>
              </Form>
            </Col>
          </Row>
        </Col>
        <Col
        // 界面右边表单
        >
          <Col>
            <Row>
              <Col>
                {
                  // 设计一个表单控件
                }
              </Col>
            </Row>
            <Row>
              <Col>
                <Button color="success" className="mr-2">
                  加载
                </Button>
                <Button color="info">新建</Button>
              </Col>
            </Row>
          </Col>
        </Col>
      </Row>
    );
  }

  private updateBinding = (event: any) => {
    console.log(event);
    switch (event.target.id) {
      case `firstName`:
        this.setState({ FirstName: event.target.value });
        break;
      case `lastName`:
        this.setState({ LastName: event.target.value });
        break;
      case `phoneNumber`:
        this.setState({ PhoneNumber: event.target.value });
        break;
      case `email`:
        this.setState({ Email: event.target.value });
        break;
      case `addr`:
        this.setState({ Address: event.target.value });
        break;
      case `dateOfBirth`:
        this.setState({ DateOfBirth: event.target.vlue });
    }
  };
}
